<template>
	<view class="content commonPop">
		<u-popup :show="isAdd" mode="bottom">
			<view class="purchaseBox">
				<view class="baseTop">
					<text>领用配件</text>
					<view class="closeBox" @click="isAdd = false">
						<image src="../static/closeBtn.png" mode=""></image>
					</view>
				</view>
				
				<view class="partType">
					<text @click="changeType(item,index)" :class="suo === index?'active':''" v-for="(item,index) in typeList" :key="index">
						{{item.categoryName}}
					</text>
				</view>
				
				<view class="partBox">
					<view class="partNav">
						<text @click="changeCate(item,index)" :class="cateIndex === index?'active':''" v-for="(item,index) in cateList" :key="index">
							{{item.categoryName}}
						</text>
					</view>
					
					<view class="partWrap">
						<view class="fenList">
							<text :class="fenIndex === index?'active':''" v-for="(item,index) in fenList" :key="index">
								{{item.categoryName}}
							</text>
						</view>
						<view class="partList">
							<view class="partli" v-for="(item,index) in listData" :key="index">
								<view class="partInfo">
									<view class="partImg">
										<image src="https://czjy.jorse.xyz/images/goods.png" mode=""></image>
									</view>
									<view class="partContent">
										<view class="partTitle">
											{{item.partsName}}
										</view>
										<view class="partSpec">
											规格：{{item.specification}}
										</view>
										<view class="partSpec">
											库存：{{item.quantity}} <text @click="goPurchse(item)">采购</text>
										</view>
									</view>
								</view>
								
								<view class="partChoose">
									<view class="plusBtn" @click="miusItem(index)">
										-
									</view>
									<view class="partInput">
										<input type="number" v-model="item.number" placeholder="请输入数量"  />
									</view>
									<view class="nlusBtn" @click="addItem(index)">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="xunBottomBox">
					<text @click="confirmOrder">确认领取({{zongNumber}})</text>
				</view>	
				
			</view>	
		</u-popup>
		
		<useParts ref="useParts"></useParts>
		<confirmPart @closeConfirm="closeConfirm" ref="confirmPart"></confirmPart>
		<purchaseInfo ref="purchase"></purchaseInfo>
		
	</view>
</template>

<script>
	import { getTypeInfo, getInventory } from '@/api/login.js';
	import confirmPart from '@/components/confirmPart.vue';
	import purchaseInfo from '@/components/purchase.vue';
	export default {
		name:"useParts",
		components:{
			confirmPart, purchaseInfo
		},
		data() {
			return {
				isAdd: false,
				typeList: [],
				suo: 0,
				cateList: [],
				cateIndex: 0,
				fenList: [],
				fenIndex: 0,
				listData: [],
				zongNumber: 0,
				orderInfo:{},
				queryItem:{
					categoryId: '',
					projectId: ''
				}
			};
		},
		methods:{
			closeConfirm(){
				this.isAdd = false;
				this.$emit('showForm');
			},
			// 加功能
			addItem(index){
				this.listData[index].number++;
				this.zongNumber = this.listData[index].number;
			},
			// 减功能
			miusItem(index){
				if(this.listData[index].number > 0) {
					this.listData[index].number--;
					this.zongNumber = this.listData[index].number;
				}
			},
			goPurchse(val){
				console.log(val);
				val.projectId = this.orderInfo.projectId;
				val.orderId = this.orderInfo.orderId;
				this.$refs['purchase'].showInfo(val);
			},
			showInfo(val){
				console.log(val,'===========1234')
				this.orderInfo = val;
				this.queryItem.projectId = val.projectId;
				getTypeInfo({type: 1}).then(res=>{
					if(res.code == 200) {
						this.typeList =  this.listToTreeSimple(res.rows);
						this.changeType(this.typeList[0], 0);
						this.isAdd = true;
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			changeType(val,index){
				this.cateList = val.children;
				this.suo = index;
				this.changeCate(this.cateList[0],0);
			},
			changeCate(val,index){
				this.fenList = val.children;
				this.cateIndex = index;
				this.queryItem.categoryId = this.fenList[index].id;
				this.getListData();
			},
			getListData(){
				getInventory(this.queryItem).then(res=>{
						console.log(res.rows)
					if(res.code == 200) {
						res.rows.forEach(item=>{
							item.number = 0;
						})
						this.listData = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			confirmOrder(){
				if(this.zongNumber == 0) {
					return uni.$u.toast('请选择备件数量!');
				}
				let zuzu = this.listData.filter(item=> item.number > 0);
				this.$refs['confirmPart'].showInfo(zuzu,this.orderInfo.orderId);
			},
			listToTreeSimple(data) {
			  const res = [];
			  data.forEach((item) => {
			    const parent = data.find((node) => node.id === item.parentId);
			    if (parent) {
			      parent.children = parent.children || [];
			      parent.children.push(item);
			    } else {
			      // * 根节点
			      res.push(item);
			    }
			  });
			  return res;
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
		.xunBottomBox{
			height: 180rpx;background: #FFFFFF;@include flx;justify-content: space-between;position: fixed;bottom:0;left:0;
			box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.04), 0px 0px 24rpx -8rpx rgba(0,0,0,0.03);width:100%;z-index:999;
			text{
				display: block;width: 100%;height: 80rpx;background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);
				text-align: center;border-radius: 40rpx;@include baseFont(30rpx,#fff,80rpx);font-weight:500;
				margin:18rpx 26rpx 0;
			}
		}
		.purchaseBox{
			background: #ffff;border-radius: 32rpx 32rpx 0px 0px;padding-bottom:180rpx;min-height:500rpx;
			.baseTop{
				@include baseFont(36rpx,#333,112rpx);font-weight: 500;text-align: center;
				.closeBox{
					position: absolute;right:38rpx;top:52rpx;
					image{
						display: block;width:24rpx;height:24rpx;
					}
				}
			}
			.partBox{
				margin-top:16rpx;@include flx;
				.partWrap{
					width:calc(100% - 192rpx);
					.fenList{
						width:100%;margin-left:16rpx;margin-bottom:18rpx;font-size:0;
						text{
							display: inline-block;width: 152rpx;height: 60rpx;background: #FFFFFF;border-radius: 8rpx;
							border: 2rpx solid #E9E9E9;text-align: center;@include baseFont(28rpx,#333,60rpx);margin-right:16rpx;
						}
						text:last-of-type{
							margin-right:0;
						}
						.active{
							background: #E5EEFF;border-color:#E5EEFF;
						}
					}
					.partList{
						width:100%;
						.partli{
							@include flx;justify-content: space-between;margin-bottom:28rpx;
							padding:0 24rpx 0 16rpx;
							.partInfo{
								@include flx;
								.partImg{
									image{
										display: block;width:108rpx;height:108rpx;border-radius:4rpx;
									}
								}
								.partContent{
									margin-left:16rpx;
									.partTitle{
										@include baseFont(28rpx,#262626,40rpx);
									}
									.partSpec{
										@include baseFont(26rpx,#9C9B9B,36rpx);
										text{
											color:#3671E9;padding-left:15rpx;
										}
									}
								}
							}
							.partChoose{
								@include flx;
								.plusBtn{
									@include baseFont(30rpx,#979797,52rpx);width:20rpx;margin-right:16rpx;
								}
								.nlusBtn{
									@include baseFont(30rpx,#333,52rpx);width:30rpx;margin-left:16rpx;
								}
								.partInput{
									input{
										display: block;width:60rpx;height:52rpx;background-color:#F8F8F8;border-radius:8rpx;
										text-align: center;@include baseFont(28rpx,#333,52rpx);
									}
								}
							}
						}
					}
				}
				
				.partNav{
					width:192rpx;background-color:#F5F5F5;border-radius: 0px 4rpx 0px 0px;
					text{
						display: block;@include baseFont(28rpx,#262626,100rpx);text-align: center;
					}
					.active{
						color:#3671E9;background-color:#fff;
					}
				}
				
			}
			.partType{
				@include flx;border-bottom:2rpx solid #E9E9E9;padding:0 0 0 92rpx;
				text{
					display: block;@include baseFont(28rpx,#333,44rpx);margin-right:100rpx;padding-bottom:18rpx;position: relative;
				}
				text:last-of-type{
					margin-right:0;
				}
				.active{
					color:#3671E9;font-size:32rpx;
				}
				.active::after{
					content:'';width:52rpx;height:6rpx;background-color:#3671E9;border-radius:3rpx;
					position: absolute;bottom:0;left:50%;transform: translateX(-50%);
				}
			}
		}
	}		
</style>